
<template lang="html">

    <div class="filter-panel-public-data">

        <transition>
        <div class="filter-panel" v-if="showPanel">

            <!-- 二级行政区（省、直辖市）菜单 -->
            <div class="description-index">
                <span>区域：</span>
                <a class="filter-item" @click="unselectAdmin" v-bind:class="{selected : !selectedAdminIdx && selectedAdminIdx !== 0}">不限</a>
                <a class="filter-item" v-for="(city, idx) in cityLevel2" @click.prevent="selectAdmin(city, idx)"
                    v-bind:class="{selected : selectedAdminIdx === idx}">
                    {{ city.name }}
                </a>
            </div>

            <!-- 三级行政区（市）菜单 -->
            <transition name="filter-fade">
            <div class="description-index sub-admin" v-show="subAdminShow">
                <a class="filter-item" @click="unselectSubAdmin" v-bind:class="{selected : !selectedSubAdminIdx && selectedSubAdminIdx !== 0}">不限</a>
                <a class="filter-item" v-for="(city, idx) in subAdmin" @click.prevent="selectSubAdmin(city, idx)"
                    v-bind:class="{selected : selectedSubAdminIdx === idx}">
                    {{ city.name }}
                </a>
            </div>
            </transition>

            <!-- 数据分类菜单 -->
            <div class="description-index">
                <span>分类：</span>
                <a class="filter-item" @click="unselectCategory" v-bind:class="{selected : !selectedCategoryIdx && selectedCategoryIdx !== 0}">不限</a>
                <a class="filter-item" v-for="(category, idx) in dataCategoryLevel1" @click.prevent="selectCategory(category, idx)"
                    v-bind:class="{selected : selectedCategoryIdx === idx}">
                    {{ category.name }}
                </a>
            </div>

            <!-- 数据子分类菜单 -->
            <transition name="filter-fade">
            <div class="description-index sub-admin" v-show="subCategoryShow">
                <a class="filter-item" @click="unselectSubCategory" v-bind:class="{selected : !selectedSubCategoryIdx && selectedSubCategoryIdx !== 0}">不限</a>
                <a class="filter-item" v-for="(category, idx) in subCategory" @click.prevent="selectSubCategory(category, idx)"
                    v-bind:class="{selected : selectedSubCategoryIdx === idx}" :key="idx">
                    {{ category.name }}
                </a>
            </div>
            </transition>

        </div>
        </transition>
    </div>

</template>

<script>

    import Bus from '../../utils/event_bus'
    import axios from 'axios'
    const qs = require('qs')

    const axiosInstance = axios.create();

    export default {

        props: {
            cities: Array,
            categories: Array
        },

        data() {
            return {
                selectedRootAdmin: null,        // 选定的根城市
                selectedAdmin: null,            // 控制选定的区域条目
                selectedAdminIdx: null,         // 控制选定的区域条目索引
                selectedSubAdminIdx: null,      // 控制选定的子区域条目索引
                subAdmin: null,                 // 选定的区域的所有子区域
                subAdminShow: false,            // 子区域列表是否显示
                selectedRootCategory: null,     // 选定的数据主分类
                selectedCategory: null,         // 选定的数据子分类
                selectedCategoryIdx: null,      // 选定的数据分类索引
                selectedSubCategoryIdx: null,   // 选定的数据子分类索引
                subCategory: null,              // 选定的分类的所有子分类
                subCategoryShow: false,         // 子分类列表是否显示
                cityLevel2: null,               // 所有2级城市列表
                searchText: null,               // 可与搜索组件协作，添加搜索条件
                showPanel: false,               // 是否显示筛选面板
            };
        },

        computed: {

            selectedFilter() {

                return {
                    admin: this.selectedAdmin,
                    category: this.selectedCategory,
                    search: this.searchText
                };

            }

        },

        created() {

            this.cityLevel2 = this.extractAdmin();
            this.dataCategoryLevel1 = this.extractCategory();

            Bus.$on('filter-bread-crumb-clear-filter', () => {
                this.clearFilter();
            });

            Bus.$on('filter-bread-crumb-remove-filter', (filter) => {

                if (filter === 'admin') {
                    this.selectedAdminIdx = null;
                    this.selectedSubAdminIdx = null;
                    this.selectedAdmin = null;
                    this.subAdminShow = null;
                }

                if (filter === 'category') {
                    this.selectedCategoryIdx = null;
                    this.selectedCategory = null;
                    this.subCategoryShow = false;
                }

            });

            Bus.$on('filter-bread-crumb-toggle-panel', () => {
                this.showPanel = !this.showPanel;
            });
        },

        watch: {

            selectedFilter: {
                deep: true,
                handler: function(newVal, oldVal) {
                    let admin = newVal.admin ? newVal.admin.code : null;
                    let category = newVal.category ? newVal.category.code : null;
                    let params = {
                        admin: admin,
                        category: category
                    };
                    Bus.$emit('filter-panel-change', params);
                }
            }

        },

        methods: {

            selectAdmin(city, idx) {

                this.selectedAdminIdx = idx;
                this.selectedAdmin = city;
                this.selectedRootAdmin = city;
                Bus.$emit('filter-panel-select-admin', this.selectedAdmin, this.selectedRootAdmin);

                if (city && (city.code % 10000 === 0)) {
                    let subCities = this.extractSubAdmin(city.code);
                    if (!subCities) {
                        this.selectedSubAdminIdx = null;
                        this.subAdminShow = false;
                        return;
                    }
                    this.unselectSubAdmin();
                    this.subAdmin = subCities;
                    this.subAdminShow = true;
                }

            },

            unselectAdmin() {

                this.selectedAdminIdx = null;
                this.subAdminShow = null;
                this.selectedAdmin = null;
                this.selectedRootAdmin = null;

                this.unselectSubAdmin();
                Bus.$emit('filter-panel-unselect-admin');

            },

            selectSubAdmin(city, idx) {

                this.selectedSubAdminIdx = idx;
                this.selectedAdmin = city;
                Bus.$emit('filter-panel-select-admin', this.selectedAdmin);
            },

            unselectSubAdmin() {

                this.selectedSubAdminIdx = null;
                this.selectedAdmin = this.cityLevel2[this.selectedAdminIdx];
                Bus.$emit('filter-panel-unselect-subadmin');
            },

            selectCategory(category, idx) {

                this.selectedCategoryIdx = idx;
                this.selectedCategory = category;
                this.selectedRootCategory = category;
                Bus.$emit('filter-panel-select-category', this.selectedCategory, this.selectedRootCategory);

                if (category && (category.code % 10000 === 0)) {
                    let subCategories = this.extractSubCategory(category.code);
                    if (!subCategories) {
                        this.selectedSubCategoryIdx = null;
                        this.subCategoryShow = false;
                        return;
                    }
                    this.unselectSubCategory();
                    this.subCategory = subCategories;
                    this.subCategoryShow = true;
                }

            },

            unselectCategory() {

                this.selectedCategoryIdx = null;
                this.subCategoryShow = false;
                this.selectedCategory = null;
                this.selectedRootCategory = null;

                this.unselectSubCategory();
                Bus.$emit('filter-panel-unselect-category');
            },

            selectSubCategory(category, idx) {

                this.selectedSubCategoryIdx = idx;
                this.selectedCategory = category;
                Bus.$emit('filter-panel-select-category', this.selectedCategory);
            },

            unselectSubCategory() {

                this.selectedSubCategoryIdx = null;
                this.selectedCategory = this.dataCategoryLevel1[this.selectedCategoryIdx];
                Bus.$emit('filter-panel-unselect-subcategory');
            },

            clearFilter() {

                this.selectedAdminIdx = null;
                this.selectedSubAdminIdx = null;
                this.selectedAdmin = null;
                this.selectedRootAdmin = null;
                this.subAdminShow = false;
                this.selectedCategoryIdx = null;
                this.selectedSubCategoryIdx = null;
                this.selectedCategory = null;
                this.selectedRootCategory = null;
                this.subCategoryShow = false;
            },

            /**
             * 提取所有省一级行政区，如果没有返回null
             * @return {array/null}
             */
            extractAdmin() {

                if (!this.cities) {
                    return null;
                }

                let subCities = this.cities.filter((city, idx) => {

                    let result = city.code % 10000 === 0;
                    return result;

                });

                if (subCities.length <= 0) {
                    return null;
                }

                let orderedSubCities = subCities.sort((a, b) => {
                    if (a.code <= b.code) {
                        return -1;
                    } else {
                        return 1;
                    }
                });

                return orderedSubCities;

            },

            /**
             * 提取指定code的行政区的所有下级行政区，如果没有返回null
             * @param {integer} code 行政区代码
             * @return {array/null}
             */
            extractSubAdmin(code) {

                let subCities = this.cities.filter((city, idx) => {

                    let result = city.code < code + 10000 && city.code > code;
                    return result;

                });

                if (subCities.length <= 0) {
                    return null;
                }

                let orderedSubCities = subCities.sort((a, b) => {
                    if (a.code <= b.code) {
                        return -1;
                    } else {
                        return 1;
                    }
                });

                return orderedSubCities;

            },

            /**
             * 提取数据所有的一级分类
             * @return {array/null}
             */
            extractCategory() {

                if (!this.categories) {
                    return null;
                }

                let subCategories = this.categories.filter((category, idx) => {

                    let result = category.code % 10000 === 0;
                    return result;

                });

                if (subCategories.length === 0) {
                    return null;
                }

                return subCategories;

            },

            /**
             * 提取指定数据分类的所有子分类，如果没有，返回null
             * @param {integer} code 数据分类代码
             * @return {array/null}
             */
            extractSubCategory(code) {

                let subCategories = this.categories.filter((category, idx) => {

                    let result = category.code < code + 10000 && category.code > code;
                    return result;

                });

                if (subCategories.length === 0) {
                    return null;
                }

                return subCategories;

            }

        }

    }


</script>

<style lang="scss">

    .filter-panel-public-data {

        margin: 2px;

        .filter-panel {

            padding: 4px 12px;
            margin: 12px;
            background-color: white;
            border: 1px solid rgba(0, 0, 0, 0.16);
            border-radius: 2px;

            .description-index {

                padding: 4px 0;

                span {
                    font-weight: 700;
                }


                .filter-item {

                    display: inline-block;
                    padding: 4px 8px;
                    word-break: keep-all;

                    &:hover {
                        color: #20A0FF;
                        text-decoration: underline;
                    }

                }

                a.selected {
                    color: #20A0FF;
                    font-weight: 700;
                }

            }

            .sub-admin {
                background-color: #fbfbfb;
                border: 1px solid rgba(0, 0, 0, .16);
                border-radius: 2px;
            }

        }

    }

    .filter-fade-enter-active, .filter-fade-leave-active {
        transition: opacity .5s;
    }

    .filter-fade-enter, .filter-fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
        opacity: 0
    }

</style>
